<style>
  .picImg {
    width: 40px;
    height: 40px;
  }
</style>
<template>
  <div class="app-container">
    <div class="filter-container">
      <el-date-picker
        v-model="infoTime.startTime"
        type="datetime"
        placeholder="查询开始日期"
        value-format="yyyy-MM-dd HH:mm:ss">
      </el-date-picker>
      -
      <el-date-picker
        v-model="infoTime.endTime"
        type="datetime"
        placeholder="查询结束日期"
        value-format="yyyy-MM-dd HH:mm:ss">
      </el-date-picker>
      <el-button type="primary" @click="getList">查询</el-button>
      <el-date-picker
        v-model="reveTime.endTime"
        type="datetime"
        placeholder="删除所选日期之前"
        value-format="yyyy-MM-dd HH:mm:ss">
      </el-date-picker>
      <el-button type="danger" @click="doDelete">删除</el-button>
    </div>
    <el-table v-loading="listLoading" :data="list" element-loading-text="正在查询中。。。" border fit highlight-current-row
              :header-cell-style="{background:'#92D3FF',color:'#fff'}">
    <el-table-column align="center" min-width="100" label="登录用户名称" prop="userName"/>
    <el-table-column align="center" min-width="100" label="操作时间" prop="timeOperate"/>
    <el-table-column align="center" min-width="100" label="操作动作" prop="operate"/>
    <el-table-column align="center" min-width="100" label="操作对象类型" prop="objectType"/>
    <el-table-column align="center" min-width="100" label="操作对象名称" prop="objectName"/>
    <el-table-column align="center" min-width="100" label="操作描述信息" prop="descript"/>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="infoTime.pageNum" :limit.sync="infoTime.pageSize"
                @pagination="getList"/>
  </div>
</template>

<script>
    import {doGet, doPost} from '@/api'
    import Pagination from '@/components/Pagination'

    const FETCH_PAGE = 'syslog.html'
    const FETCH_URL = {
      LIST: `${FETCH_PAGE}?op=list`,
      CREATE: `${FETCH_PAGE}?op=del`,
    }
  export default {
    name: 'syslog',
    components: {Pagination},
    data(){
      return{
        total: 0,
        infoTime:{
          startTime:undefined,
          endTime:undefined,
            pageNum: 1,
            pageSize: 20
        },
        reveTime:{
          endTime:undefined,
        },
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]},
        list:[],
        listLoading:true,
      }
    },
    created() {
        this.getList()
    },
    methods:{
      getList() {
        this.listLoading = true
        doGet(FETCH_URL.LIST, this.infoTime).then(response => {
//          console.log(response)
          this.list = response.rows
          this.total = response.data.totalcount
          this.listLoading = false
        }).catch(() => {
          this.list = []
          this.total = 0
          this.listLoading = false
        })
      },
      doDelete() {
        doGet(FETCH_URL.CREATE, this.reveTime)
          .then(response => {
            this.$notify.success({
              title: '成功',
              message: '日志删除成功'
            })
            this.getList
            this.total--
          })
          .catch(response => {
            this.$notify.error({
              title: '失败',
              message: response.message
            })
          })
      }
    }
  }
</script>
